<template>
  <Layout @size-change="sizeChange">
    <template #left-content>
      <div class="search drag" :style="{ width: `${searchSize}px` }">
        <div
          v-if="leftInfoType === 0"
          class="search-icon no-drag"
          :style="{ width: `${searchSize - 50}px` }"
          @click.stop="switchLeftInfoType(1)"
        >
          <span class="iconfont icon-search"></span>
          <span style="font-size: 13px; user-select: none">搜索</span>
        </div>
        <div v-if="leftInfoType === 1" class="search-input no-drag">
          <el-input
            ref="inputRef"
            v-model="searchValue"
            clearable
            placeholder=""
            @input="executeSearch"
          >
            <template #prefix>
              <span class="iconfont icon-search" style=""></span>
            </template>
          </el-input>
        </div>

        <div
          v-if="leftInfoType === 2"
          class="search-icon no-drag"
          :style="{ width: `${searchSize - 50}px` }"
          @click.stop="switchLeftInfoType(3)"
        >
          <span class="iconfont icon-add-user"></span>
          <span style="font-size: 13px">&nbsp;邮箱/甜蜜账号</span>
        </div>
        <div v-if="leftInfoType === 3" class="search-input no-drag">
          <el-input ref="inputRef" v-model="searchValue" clearable placeholder="">
            <template #prefix>
              <span class="iconfont icon-24px"></span>
            </template>
          </el-input>
        </div>

        <div
          v-if="leftInfoType === 0 || leftInfoType === 1"
          class="add no-drag"
          title="添加朋友"
          @click="switchLeftInfoType(2)"
        >
          <span class="iconfont icon-add-user"></span>
        </div>
        <div
          v-if="leftInfoType === 2 || leftInfoType === 3"
          class="cancel no-drag"
          style="font-size: 13px"
          @click="switchLeftInfoType(0)"
        >
          &nbsp;取消
        </div>
      </div>
      <!--      搜索之前显示 -->
      <el-scrollbar
        v-if="leftInfoType === 0"
        ref="scrollbarRef"
        class="contact-info"
        @scroll="scroll"
      >
        <!--      新的朋友-->
        <div class="block">
          <div class="book-management">
            <div class="info" :style="{ width: `${searchSize - 50}px` }">
              <span class="iconfont icon-users-alt"> &nbsp;通讯录管理</span>
            </div>
          </div>
          <div class="part-title">新的朋友</div>
          <div
            id="new-friends"
            :class="['content', currentSelection === '新的朋友' ? 'active' : '']"
            @click="switchRightInfoType(1, '新的朋友')"
          >
            <div class="part-icon">
              <div style="background: #fa9d3b" class="part-img">
                <span class="iconfont icon-add-user"></span>
              </div>
              <div class="part-name">
                新的朋友
                <el-badge :value="haveNotAcceptApplyFriendCount" :show-zero="false" class="badge" />
              </div>
            </div>
          </div>
        </div>
        <!--      群聊-->
        <div class="block">
          <div class="part-title">群聊</div>
          <div
            v-for="groupChat in groupChatList"
            :key="groupChat.groupId"
            :class="[
              'content',
              'contact-list',
              currentSelection === groupChat.groupId ? 'active' : ''
            ]"
            @click="switchRightInfoType(2, groupChat)"
            @contextmenu="
              (e) => {
                showMenu(e, userInfo, 0)
              }
            "
          >
            <div class="part-icon">
              <!--              todo  修改群聊头像-->
              <el-avatar :size="40" :src="groupChat.avatar" shape="square" />
              <div class="part-name">{{ groupChat.name }}</div>
            </div>
          </div>
        </div>
        <div class="block">
          <div
            :class="['content', 'contact-list', currentSelection === 'robot' ? 'active' : '']"
            @click="customizeClick(0)"
          >
            <div class="part-icon">
              <el-avatar :size="40" :src="Tool.getStaticFileUrl('robot.png')" shape="square" />
              <div class="part-name">甜甜圈</div>
            </div>
          </div>
        </div>
        <!--        联系人-->
        <div v-for="item in contactList" :key="item.title" class="block">
          <div class="part-title">{{ item.title }}</div>
          <div v-for="u in item.value" :key="u.userId">
            <div
              :id="`contact${u.contactUserId}`"
              :class="[
                'content',
                'contact-list',
                currentSelection === u.contactUserId ? 'active' : ''
              ]"
              @click="switchRightInfoType(3, u)"
              @contextmenu="
                (e) => {
                  showMenu(e, u, 1)
                }
              "
            >
              <div class="part-icon">
                <el-avatar
                  :size="40"
                  :src="Tool.getAvatar(u.contactUserId, u.avatar, 500)"
                  shape="square"
                />
                <div class="part-name">
                  <el-text truncated style="width: 170px; color: #000">
                    {{ determineNoteNameIsEmpty(u.noteName) ? u.nickName : u.noteName }}
                  </el-text>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>

      <!--   搜索结果-->
      <el-scrollbar v-if="leftInfoType === 1" class="search-result">
        <!--        联系人-->
        <div v-if="searchResultContactList.length > 0" class="contact-person-info">
          <div style="padding-left: 10px; font-size: 15px; color: #7a7a7a">联系人</div>
          <div
            v-for="user in searchResultContactList"
            :key="user.contactUserId"
            class="user-info"
            @click="sendMessage(user)"
          >
            <div class="avatar">
              <el-avatar
                :size="40"
                :src="Tool.getAvatar(user.contactUserId, user.avatar, 40)"
                shape="square"
              />
            </div>
            <div>
              <div class="nick-name">
                <HighlightText :text="user.nickName" :search="searchValue" />
              </div>
              <div class="userSweetCircleId">
                甜蜜账号:&nbsp;
                <HighlightText :text="user.contactUserSweetCircleId" :search="searchValue" />
              </div>
            </div>
          </div>
          <!--          <div-->
          <!--            v-for="user in searchResultContactUserSweetCircleIdList"-->
          <!--            class="user-info"-->
          <!--            @click="sendMessage(user)"-->
          <!--          >-->
          <!--            <div class="avatar">-->
          <!--              <el-avatar :size="40" :src="getAvatar(user)" shape="" />-->
          <!--            </div>-->
          <!--            <div>-->
          <!--              <div class="nick-name"><span v-html="getValue(user.nickName)"></span></div>-->
          <!--              <div class="userSweetCircleId">-->
          <!--                甜蜜账号:&nbsp;<span v-html="getValue(user.contactUserSweetCircleId)"></span>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <!--        群聊-->
        <div v-if="searchResultGroupChatList.length > 0" class="contact-person-info">
          <div style="padding-left: 10px; font-size: 15px; color: #7a7a7a">群聊</div>
          <div
            v-for="groupChat in searchResultGroupChatList"
            :key="groupChat.groupId"
            class="user-info"
            @click="sendMessage(groupChat)"
          >
            <div class="avatar">
              <el-avatar :size="40" :src="groupChat.avatar" shape="square" />
            </div>
            <div>
              <div class="nick-name">
                <HighlightText :text="groupChat.name" :search="searchValue" />
              </div>
              <div class="userSweetCircleId">
                包含:&nbsp;
                <HighlightText :text="groupChat.name" :search="searchValue" />
              </div>
            </div>
          </div>
        </div>

        <!--        聊天记录-->
        <div v-if="searchResultChatRecordList.length > 0" class="contact-person-info">
          <div style="padding-left: 10px; font-size: 15px; color: #7a7a7a">聊天记录</div>
          <div
            v-for="(item, index) in searchResultChatRecordList"
            :key="index"
            class="user-info"
            @click="sendMessage(item)"
          >
            <div class="avatar">
              <el-avatar :size="40" :src="item.avatar" shape="square" />
            </div>
            <div v-if="item.groupId">
              <div class="nick-name">
                <HighlightText :text="item.name" :search="searchValue" />
              </div>
              <div class="userSweetCircleId">
                包含:&nbsp;
                <HighlightText :text="item.name" :search="searchValue" />
              </div>
            </div>
            <div v-if="item.nickName">
              <div class="nick-name">
                <HighlightText :text="item.nickName" :search="searchValue" />
              </div>
              <div class="userSweetCircleId">
                包含:&nbsp;
                <HighlightText :text="item.nickName" :search="searchValue" />
              </div>
            </div>
          </div>
        </div>

        <!--      网络查找联系人-->
        <div
          v-if="
            (/^[a-zA-Z0-9]+$/.test(searchValue) && showWebSearch) ||
            (/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.com)/.test(searchValue) && showWebSearch)
          "
          class="search-contacts-online"
          @click="searchContact"
        >
          <div class="icon">
            <span class="iconfont icon-add-user"></span>
          </div>
          <div style="font-size: 14px; user-select: none">
            网络查找甜蜜账号/邮箱&nbsp;&nbsp;&nbsp;<span class="iconfont icon-right"></span>
          </div>
        </div>
      </el-scrollbar>

      <el-scrollbar v-if="leftInfoType === 3" class="search-result">
        <div
          v-if="searchContactMsg.length > 0"
          style="padding: 20px; color: #8c8c8c; font-size: 14px; background: white"
        >
          <span>{{ searchContactMsg }}</span>
        </div>
        <div v-if="searchValue.length > 0" class="search-contacts-online" @click="searchContact">
          <div class="icon">
            <span class="iconfont icon-search"></span>
          </div>
          <div style="font-size: 14px; user-select: none">
            搜索:&nbsp;
            <HighlightText :text="searchValue" :search="searchValue" />
            <span class="iconfont icon-right"></span>
          </div>
        </div>
      </el-scrollbar>
    </template>
    <template #right-content>
      <div @click="switchStatus">
        <BlankPage
          v-if="
            (rightInfoType === 0 && rightInfoType !== 3) ||
            (contactInfoStore.getContactInfo() == null && rightInfoType !== 3)
          "
        ></BlankPage>
        <ContactInfo v-if="rightInfoType === 1"></ContactInfo>
        <GroupInfo v-if="rightInfoType === 2"></GroupInfo>
        <NewFriends v-if="rightInfoType === 3"></NewFriends>
      </div>
    </template>
  </Layout>

  <div v-if="showMenuCard" class="menu-card" :style="[{ left: x + 'px', top: y + 'px' }]">
    <el-card class="card">
      <div class="card-text" @click.stop="sendMessage(rcMenuSelectedUser)">发消息</div>
      <div
        v-if="showMenuCardType === 1"
        class="card-text"
        @click.stop="sendBusinessCardCard(rcMenuSelectedUser)"
      >
        发送名片
      </div>
      <div
        v-if="showMenuCardType === 1"
        class="card-text delete-contact"
        :style="{ hover: { background: 'red' } }"
        @click.stop="deleteContactA"
      >
        删除联系人
      </div>
      <div v-if="showMenuCardType === 0" class="card-text" @click.stop="">退出群聊</div>
    </el-card>
  </div>

  <div
    v-if="showCardInfo && cardInfoType === 0"
    class="card-contact"
    @click.self="Tool.playWarningTone()"
  >
    <el-card class="card-contact-info">
      <div style="padding: 20px">
        <div>{{ searchContactMsg }}</div>
        <div class="button">
          <el-button type="primary" @click.stop="closeCard">确定</el-button>
        </div>
      </div>
    </el-card>
  </div>

  <div v-if="showDeleteContactCard" class="card-contact3" @click.self="Tool.playWarningTone()">
    <el-card class="card-contact-info">
      <div style="padding: 20px">
        <div>
          是否确认删除该联系人？<span style="color: #eb0000"><br />将会删除所有聊天记录</span>
        </div>
        <div class="button">
          <el-button @click.stop="showDeleteContactCard = false">取消</el-button>
          <el-button type="primary" @click.stop="deleteContact(rcMenuSelectedUser)">确定</el-button>
        </div>
      </div>
    </el-card>
  </div>

  <div v-if="showCardInfo && cardInfoType === 1" class="card-contact2 no-drag" @click="closeCard">
    <el-card class="card-contact-info2">
      <div class="info">
        <div class="userimg">
          <el-avatar
            :size="60"
            :src="Tool.getAvatar(searchContactResult.userId, searchContactResult.avatar, 60)"
            shape="square"
          />
        </div>
        <div class="user-info">
          <div class="nick-name">
            <span>{{ searchContactResult.nickName }}</span>
            <span
              :class="['iconfont sex', searchContactResult.sex === 1 ? 'icon-man' : 'icon-woman']"
            ></span>
          </div>
          <div class="area-name">地区：{{ searchContactResult.areaName }}</div>
        </div>
      </div>
      <el-divider />
      <div class="button">
        <el-button
          v-if="searchContactResultIsFriend"
          type="primary"
          @click.stop="sendMessage(searchContactResult)"
          >发消息
        </el-button>
        <el-button v-else type="primary" @click.stop="switchCardInfo(0)">添加到通讯录</el-button>
      </div>
    </el-card>
  </div>
  <div v-if="showAddContactcardInfo" class="add-contact-card no-drag">
    <el-card class="add-contact-card-info">
      <div class="title">申请添加朋友</div>
      <div class="applyMsg">
        <div class="info">
          <div class="a">发送添加朋友申请</div>
          <div>
            <el-input v-model="addFriendApplyFormData.applyMsg" />
          </div>
        </div>
        <div class="info">
          <div class="a">备注名</div>
          <div>
            <el-input v-model="addFriendApplyFormData.noteName" />
          </div>
        </div>
        <!--        <div>-->
        <!--          <div>标签</div>-->
        <!--          <div><el-input v-model="addFriendApplyFormData.applyMsg"/></div>-->
        <!--        </div>-->
      </div>
      <div class="sweet-circle-authority">
        <div class="a">设置甜甜圈权限</div>
        <div class="b">
          <div
            class="c"
            style="cursor: pointer"
            @click="addFriendApplyFormData.sweetCircleAuth = 1"
          >
            <span style="color: #000000; font-size: 14px">聊天、甜甜圈</span
            ><span
              v-if="addFriendApplyFormData.sweetCircleAuth === 1"
              class="iconfont icon-dui active"
            ></span>
          </div>
          <el-divider />
          <div
            class="c"
            style="cursor: pointer"
            @click="addFriendApplyFormData.sweetCircleAuth = 2"
          >
            <span style="color: #000000; font-size: 14px">仅聊天</span
            ><span
              v-if="addFriendApplyFormData.sweetCircleAuth === 2"
              class="iconfont icon-dui active"
            ></span>
          </div>
        </div>
      </div>
      <div v-if="addFriendApplyFormData.sweetCircleAuth === 1" class="sweet-circle-authority">
        <div class="a">甜甜圈和状态</div>
        <div class="b">
          <div class="c">
            <span style="color: #000000; font-size: 14px">不让他（她）看</span>
            <el-switch
              v-model="addFriendApplyFormData.sweetCircleStatusA"
              :active-value="1"
              :inactive-value="0"
            />
          </div>
          <el-divider />
          <div class="c">
            <span style="color: #000000; font-size: 14px">不看他</span>
            <el-switch
              v-model="addFriendApplyFormData.sweetCircleStatusB"
              :active-value="1"
              :inactive-value="0"
            />
          </div>
        </div>
      </div>
      <div class="button">
        <el-button class="confirm" type="primary" @click="addContact">确定</el-button>
        <el-button class="cancel" type="primary" @click="customizeClick(1)">取消</el-button>
      </div>
    </el-card>
  </div>
  <ShowSendBusinessCardCard
    v-if="showSendBusinessCardCard"
    @close="showSendBusinessCardCard = false"
  ></ShowSendBusinessCardCard>
</template>
<script setup>
import Layout from '#/components/Layout.vue'
import HighlightText from '#/components/HighlightText.vue'
import ContactInfo from '#/views/contact/ContactInfo.vue'
import ShowSendBusinessCardCard from '#/views/contact/SendBusinessCardCard.vue'
import GroupInfo from '#/views/contact/GroupInfo.vue'
import NewFriends from '#/views/contact/NewFriends.vue'
import BlankPage from '#/views/contact/BlankPage.vue'
import { computed, nextTick, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import Tool from '#/utils/Tool'
import Api from '#/utils/Api'
import { useContactInfoStore } from '#/stores/ContactInfoStore'
import { useUserInfoStore } from '#/stores/UserInfoStore'
import { useNewFriendStore } from '#/stores/NewFriendStore'

// import { useChatSessionStore } from '#/stores/ChatSessionStore'

const newFriendStore = useNewFriendStore() // 存储联系人信息  用户的所有联系人
// const chatSessionStore = useChatSessionStore() // 存储联系人聊天消息信息  用户的所有聊天列表
const userInfoStore = useUserInfoStore()
const contactInfoStore = useContactInfoStore() // 存储联系人信息  用户的所有联系人
const router = useRouter()
const route = useRoute()

const userInfo = computed(() => {
  return userInfoStore.getUserInfo() // 获取 登录用户的信息
})
const showCardInfo = ref(false) // 显示卡片信息 查询的联系人信息 错误信息（没有查到联系人）
const cardInfoType = ref(0) // 卡片信息类型 0：错误信息 1：联系人信息
const searchContactMsg = ref('') // 搜索联系人返回的消息  是否查询到联系人以及联系人的状态
const leftInfoType = ref(0) // 左边信息类型 根据信息类型显示 不同信息 0：显示联系人 1/2/3：搜索结果
const rightInfoType = ref(0) // 右边信息类型 0：显示空白 1：联系人信息 2：新的朋友申请信息 3：群聊信息
const searchValue = ref('') // 搜索框输入的值  用户 输入的搜索值
const showAddContactcardInfo = ref(false)
const scrollValue = ref() // 滚动条距离顶部的距离
const scrollbarRef = ref() // 滚动组件的ref引用
const showWebSearch = ref(true) //
const addFriendApplyFormData = ref({
  userId: userInfo.value.userId, // 登录用户 用户id
  contactUserId: '', // 添加的联系人userId
  userSweetCircleId: '', // 添加的联系人甜甜圈id
  noteName: '', // 备注名
  applyMsg: `我是${userInfo.value.nickName}`, // 申请消息
  sweetCircleAuth: 1, // 甜甜圈状态
  sweetCircleStatusA: 0, // 甜甜圈状态
  sweetCircleStatusB: 0 // 甜甜圈状态
}) // 滚动组件的ref引用

// 根据UserSweetCircleId nickname 搜索 已添加的联系人
const searchResultContactList = ref([])

// 搜索 群聊信息 根据群聊的所有信息 聊天记录  联系人昵称 联系人账号
const searchResultGroupChatList = ref([
  {
    groupId: '123',
    name: '2024',
    avatar: 'http://127.0.0.1:20221/static/avatar/ycc011.jpg'
  },
  { groupId: '456', name: '2024', avatar: 'http://127.0.0.1:20221/static/avatar/ycc011.jpg' }
])

// 搜索 所有的聊天记录中所包含的信息
const searchResultChatRecordList = ref([
  {
    nickName: '联系人123',
    userSweetCircleId: '123456789',
    avatar: 'http://127.0.0.1:20221/static/avatar/ycc011.jpg'
  },
  { groupId: '456', name: '2024', avatar: 'http://127.0.0.1:20221/static/avatar/ycc011.jpg' }
])

const inputRef = ref(null) // 搜索输入框的引用 用于设置 自动获取焦点
const currentSelection = ref('') // 当前选择的联系人 或 新的朋友 群聊 用于设置选中后的背景色  userContactId
const searchContactResult = ref({}) // 搜索联系人返回的结果  用户信息
const searchContactResultIsFriend = ref(false) // 搜索联系人返回的结果 是否是自己

// 联系人列表 计算属性 从存储中获取
const contactList = computed(() => {
  return contactInfoStore.getContactInfoList()
})

const vh = ref(window.innerHeight) // 获取窗口高度
// const vh = ref(document.documentElement.clientHeight);
const vw = ref(window.innerWidth) // 获取窗口宽度
// 监听窗口变化
window.addEventListener('resize', () => {
  vh.value = window.innerHeight // 获取窗口高度
  vw.value = window.innerWidth // 获取窗口宽度
})
const x = ref()
const y = ref()
const showMenuCard = ref(false) // 是否显示菜单  右键点击
const showMenuCardType = ref(1) // 右键点击联系人 类型 0 点击的群聊 1点击的联系人
const rcMenuSelectedUser = ref({}) // 右键点击联系人
const showDeleteContactCard = ref(false) // 是否显示删除联系人卡片
const showSendBusinessCardCard = ref(false) // 是否显示发送名片卡片

// 群聊列表
const groupChatList = ref([
  {
    groupId: '123',
    name: '2024',
    avatar: 'http://127.0.0.1:20221/static/avatar/ycc011.jpg'
  },
  { groupId: '456', name: '2024', avatar: 'http://127.0.0.1:20221/static/avatar/ycc011.jpg' }
])

const haveNotAcceptApplyFriendCount = computed(() => {
  let val = 0
  const newFriendList = newFriendStore.getNewFriend()
  newFriendList.forEach((item) => {
    if (item.applyStatus === 0) {
      val++
    }
  })
  return val
})

/**
 * 切换右边信息类型
 * @param type
 * @param item
 */
const switchRightInfoType = (type, item) => {
  showMenuCard.value = false
  switch (type) {
    case 1: // 新的朋友
      currentSelection.value = item
      rightInfoType.value = 3
      break
    case 2: // 群聊消息
      currentSelection.value = item.groupId
      rightInfoType.value = 2
      break
    case 3: // 联系人
      if (item.contactUserId === currentSelection.value) {
        currentSelection.value = ''
        rightInfoType.value = 0
        break
      }
      currentSelection.value = item.contactUserId // 当前选择的值
      contactInfoStore.setContactInfo(item) //设置联系人存储信息 用于更新联系人详情组件的信息
      rightInfoType.value = 1 // 右边信息的类型
      break
  }
}

/**
 * 切换左边信息类型 点击搜索面板
 */
const switchStatus = () => {
  showWebSearch.value = true
  showMenuCard.value = false
  switch (leftInfoType.value) {
    case 1:
      switchLeftInfoType(0)
      break
    case 2:
      switchLeftInfoType(0)
      break
    case 3:
      switchLeftInfoType(2)
      break
  }
}

const showMenu = (e, userInfo, type) => {
  showMenuCardType.value = type
  rcMenuSelectedUser.value = userInfo
  showMenuCard.value = true
  leftInfoType.value = 0
  x.value = e.clientX // 设置删除卡片的 x 坐标
  y.value = e.clientY > vh.value - 75 ? e.clientY - 75 : e.clientY
}

/**
 * 切换左边信息类型
 * @param val
 */
const switchLeftInfoType = (val) => {
  showMenuCard.value = false
  if (val === 0) {
    searchResultContactList.value = []
    searchResultGroupChatList.value = []
    searchResultChatRecordList.value = []
  }

  searchValue.value = ''
  leftInfoType.value = val
  searchContactMsg.value = ''
  nextTick(() => {
    inputRef.value.focus() // 使搜索输入框获取焦点
  })
}
/**
 * 切换卡片信息
 * @param val 类型
 */
const switchCardInfo = (val) => {
  switch (val) {
    case 0:
      showCardInfo.value = false
      showAddContactcardInfo.value = true
      break
  }
}

/**
 * 执行搜索
 */
const executeSearch = () => {
  if (searchValue.value.trim() === '') {
    searchResultContactList.value = []
    searchResultGroupChatList.value = []
    searchResultChatRecordList.value = []
    leftInfoType.value = 0
    return
  }

  // 根据联系人 nickName userSweetCircleId
  contactList.value.forEach((item) => {
    item.value.forEach((item2) => {
      showWebSearch.value = !(
        item2.contactUserSweetCircleId === searchValue.value || item2.email === searchValue.value
      )
      if (item2.contactUserSweetCircleId.indexOf(searchValue.value) !== -1) {
        let bool = true
        // 判断 是否已经存在 添加过了
        for (let i = 0; i < searchResultContactList.value.length; i++) {
          let val = searchResultContactList.value[i]
          if (val.contactUserSweetCircleId === item2.contactUserSweetCircleId) {
            bool = false
          }
        }
        if (bool) {
          searchResultContactList.value.push(item2)
        }
      }
      if (item2.nickName.indexOf(searchValue.value) !== -1) {
        let bool = true
        for (let i = 0; i < searchResultContactList.value.length; i++) {
          let val = searchResultContactList.value[i]
          if (val.nickName === item2.nickName) {
            bool = false
          }
        }
        if (bool) {
          searchResultContactList.value.push(item2)
        }
      }
    })
  })
  // todo 根据群聊 name groupId
  // todo 根据 聊天的 群聊名 联系人名 还有聊天中的内容 群聊的公告内容
}
// /**
//  * 对符合搜索条件的值进行高亮
//  * 用于在字符串value中匹配searchValue.value的内容，
//  * 并将匹配到的内容用<span>标签包裹起来，设置为绿色高亮显示。
//  * 其中，使用了正则表达式reg来进行全局（gi）匹配。
//  * @param value
//  * @returns {*}
//  */
// const getValue = (value) => {
//   const reg = new RegExp(searchValue.value, 'gi')
//   return value.replace(reg, `<span style="color: #00c25b">${searchValue.value}</span>`)
// }

/**
 * 点击搜索的好友 跳转发送消息的页面
 * @param user
 */
const sendMessage = (user) => {
  showMenuCard.value = false
  leftInfoType.value = 0
  if (user === 'robot') {
    ElMessage.success('机器人正在开发中')
  } else {
    router.push({
      path: '/chat',
      query: { sessionId: user.contactUserId, timestamp: new Date().getTime() }
    })
  }
}

/**
 * 发送名片
 * @param user
 */
const sendBusinessCardCard = (user) => {
  contactInfoStore.setContactInfoB(user)

  showSendBusinessCardCard.value = true
  showMenuCard.value = false
}

/**
 * 搜索联系人
 */
const searchContact = async () => {
  // 如果搜索的是自己
  if (
    searchValue.value === userInfo.value.userSweetCircleId ||
    searchValue.value === userInfo.value.email
  ) {
    searchContactResultIsFriend.value = true //
    searchContactResult.value = userInfo.value
    cardInfoType.value = 1 // 卡片信息类型
    showCardInfo.value = true // 显示卡片信息
    return
  }

  // 外层循环遍历 contactList
  for (let i = 0; i < contactList.value.length; i++) {
    const item = contactList.value[i]
    // 内层循环遍历 item.value
    for (let j = 0; j < item.length; j++) {
      const item2 = item[j]
      // 检查是否满足条件
      if (
        searchValue.value === item2.contactUserSweetCircleId ||
        searchValue.value === item2.email
      ) {
        searchContactResult.value = item2
        searchContactResultIsFriend.value = true
        // 如果找到后立即退出循环
        break
      }
    }
    // 如果已经找到了结果，不需要继续外层循环
    if (searchContactResultIsFriend.value) {
      break
    }
  }

  if (searchContactResultIsFriend.value) {
    cardInfoType.value = 1 // 卡片信息类型
    showCardInfo.value = true // 显示卡片信息
    searchContactMsg.value = '' // 消息提示信息设置为空
    return
  }
  const response = await Api.getUser(searchValue.value) // 请求后端获取联系人
  searchContactResult.value = response.data // 响应数据
  searchContactMsg.value = response.msg // 响应消息

  showCardInfo.value = true // 显示卡片信息

  if (response.code === 200) {
    // 查到联系人
    cardInfoType.value = 1 // 卡片信息类型
    searchContactMsg.value = '' // 消息提示信息设置为空
  } else {
    cardInfoType.value = 0 // 卡片信息类型 警告提示
  }
}

const updateContactList = async () => {
  const user = userInfoStore.getUserInfo()
  const res = await Api.getContactList(user.userId)
  if (res.code === 200) {
    contactInfoStore.setContactInfoList(res.data) // 设置联系人信息列表
    let contactInfo = contactInfoStore.getContactInfo() // 获取当前选择的联系人单独信息
    if (contactInfo) {
      for (let i = 0; i < res.data.length; i++) {
        let bool = false
        let val = res.data[i]
        for (let j = 0; j < val.value.length; j++) {
          if (val.value[j].contactUserId === contactInfo.contactUserId) {
            contactInfoStore.setContactInfo(val.value[j]) // 修改当前选择的联系人单独信息
            bool = true
            break
          }
        }
        if (bool) {
          break
        }
      }
    }
    // 查找添加黑名单的联系人 添加到本地存储
    let arr = []
    for (let i = 0; i < res.data.length; i++) {
      let val = res.data[i]
      for (let j = 0; j < val.value.length; j++) {
        if (val.value[j].friendsCode === 2) {
          arr.push(val.value[j])
        }
      }
    }
    contactInfoStore.setContactBlacklistList(arr)
  }

}


/**
 * 添加联系人
 */
const addContact = async () => {
  addFriendApplyFormData.value.contactUserId = searchValue.value
  const response = await Api.addContact(addFriendApplyFormData.value)
  if (response.code === 200) {
    leftInfoType.value = 0
    addFriendApplyFormData.value = {
      userId: userInfo.value.userId, // 登录用户 用户id
      contactUserId: '', // 添加的联系人userId
      userSweetCircleId: '', // 添加的联系人甜甜圈id
      noteName: '', // 备注名
      applyMsg: `我是${userInfo.value.nickName}`, // 申请消息
      sweetCircleAuth: 1, // 甜甜圈状态
      sweetCircleStatusA: 0, // 甜甜圈状态
      sweetCircleStatusB: 0 // 甜甜圈状态
    }
    // 添加或更新 新朋友 信息
  } else if (response.code === 201) {
    // 添加好友成功
    updateContactList()
  } else if (response.code === 401) {
    // 好申请发送成功  更新好友申请列表
    ElMessage.success(response.msg)
    let newFriendList = newFriendStore.getNewFriend()
    // 遍历 newFriendList  查询是否有contactApplyId 相等的元素存在如果有将该元素删除 并在数组头位置添加元素 response.data
    let a = JSON.parse(response.data.applyContent)
    response.data.contactApply = a.contactApply
    response.data.contactApplyUserInfo = a.contactApplyUserInfo
    response.data.type = a.type
    response.data.contactUserInfo = a.contactUserInfo


    for (let i = 0; i < newFriendList.length; i++) {
      if (newFriendList[i].contactUserId === response.data.contactUserId) {
        newFriendList.splice(i, 1)
        newFriendList.unshift(response.data)
        break
      }
    }
    if (newFriendList.length === 0) {
      newFriendList.push(response.data)
    }
    newFriendStore.setNewFriend(newFriendList)
  } else {
    ElMessage.error(response.msg)
  }
  showAddContactcardInfo.value = false
  leftInfoType.value = 0
}
/**
 * 删除联系人
 */
const deleteContactA = () => {
  showMenuCard.value = false
  showDeleteContactCard.value = true
}

/**
 * 确认删除联系人
 */
const deleteContact = async (user) => {
  //user.contactUserId  删除的联系人用户id
  showMenuCard.value = false
  // 后端删除联系人
  const res = await Api.deleteContact({ userId: user.userId, contactUserId: user.contactUserId })
  if (res.code === 200) {
    let contactListNew = contactList.value
    for (let i = 0; i < contactListNew.length; i++) {
      let item = contactListNew[i].value // 获取联系人数组
      let over = false
      for (let j = 0; j < item.length; j++) {
        // 遍历联系人数组
        let item2 = item[j] // 获取联系人数组的联系人对象
        if (item2.contactUserId === user.contactUserId) {
          item.splice(j, 1)
          over = true
          break
        }
      }
      if (over) {
        break
      }
    }
    contactInfoStore.setContactInfoList(contactListNew) //重新设置联系人列表
    let u = contactInfoStore.getContactInfo()
    // 如果删除的为当前选中联系人 就设置为 空取消选中状态
    if (u && u.contactUserId === user.contactUserId) {
      contactInfoStore.setContactInfo(null)
      rightInfoType.value = 0 // 空白页
    }
    if (user.contactUserId === currentSelection.value) {
      currentSelection.value = ''
      rightInfoType.value = 0
    }
    //  删除会话 消息
    const res2 = await window.ipcRenderer.invoke('deleteChatSession', user.contactUserId, true)
    if (!res2.status) {
      ElMessage.error(res2.msg)
    }
    ElMessage.success('删除联系人成功')
    showDeleteContactCard.value = false
  }
}

/**
 * 关闭卡片
 */
const closeCard = () => {
  showCardInfo.value = false
  searchContactResultIsFriend.value = false
  leftInfoType.value = 0
}

/**
 * 当触发滚动事件时，返回滚动的距离
 * @param scrollTop
 */
const scroll = ({ scrollTop }) => {
  scrollValue.value = scrollTop // 设置滚动条距离顶部的距离
}
/**
 * 点击机器人时跳转发送消息的页面
 */
const customizeClick = (num) => {
  switch (num) {
    case 0: // 点击机器人
      sendMessage('robot')
      showMenuCard.value = false
      break
    case 1: // 取消添加联系人
      showAddContactcardInfo.value = false
      leftInfoType.value = 0
  }
}
const determineNoteNameIsEmpty = (notName) => {
  if (notName === '' || notName === null || notName === undefined) {
    return true
  }
}
const searchSize = ref(260)
const sizeChange = (num) => {
  searchSize.value = num
}

/**
 * 监听路由变化
 *
 */
watch(
  () => route.path,
  (newVal) => {
    if (newVal === '/contact') {
      nextTick(() => {
        let targetElement = null

        if (currentSelection.value.trim() === '') {
          targetElement = document.getElementById('new-friends')
        } else {
          targetElement = document.getElementById('contact' + currentSelection.value)
        }

        if (targetElement && scrollbarRef.value) {
          const container = scrollbarRef.value.wrapRef
          container.scrollTop = targetElement.offsetTop
          // container.scrollTo({
          //   top: targetElement.offsetTop,
          //   behavior: 'smooth'
          // })

          // targetElement.scrollIntoView() // 滚动到目标元素  整个页面滚动
        }
      })
    }
  }
  // { immediate: true, deep: true }   //immediate: true 表示监听器会立即触发一次，deep: true 表示监听器会深入监听对象属性的变化。
)
</script>
<style lang="scss" scoped>
.search {
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-right: 1px solid #eae7e6;
  background: #ffffff;
  border-bottom: 1px solid #eae7e6;
  border-right: 2px solid #b0b0b0;
  .search-icon {
    background: #e0e0e0;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
    cursor: text;
    border-radius: 5px;
  }

  .search-input {
    flex: 0.9;
    margin-left: 5px;

    :deep(.el-input__wrapper) {
      height: 25px;
      box-shadow: none;
      border: 1px solid #d0d0d0;
    }
  }

  .add {
    width: 25px;
    height: 25px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-right: 5px;
    background: #ececec;
    cursor: pointer;

    .iconfont {
      font-size: 15px;
    }

    &:hover {
      background: #e0e0e1;
    }
  }

  .cancel {
    cursor: pointer;
  }
}

.block {
  user-select: none;
  background: #f5f5f5;
  border-bottom: 1px solid #d9d9d9;

  .book-management {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;

    .info {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 30px;
      border: 1px solid #d0d0d0;
      background: #ffffff;
      color: #000000;

      .iconfont {
        font-size: 13px;
      }
    }
  }

  .part-title {
    padding: 15px 0 0 10px;
    color: #888888;
    font-size: 13px;
  }

  .content {
    padding: 10px;

    &:hover {
      background: #eaeaea;
    }
  }

  .active {
    background: #dcdcdcff;

    &:hover {
      background: #dcdcdcff;
    }
  }

  .part-icon {
    display: flex;

    .part-img {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: #ffffff;
        font-size: 30px;
      }
    }
  }

  .part-name {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 15px;
    user-select: none;
    font-size: 14px;
  }
}

.contact-list {
  padding-bottom: 3px;
}

.search-result {
  .contact-person-info {
    background: #f5f5f5;

    .user-info {
      display: flex;
      align-items: center;
      padding: 10px;

      .avatar {
        width: 40px;
      }

      .nick-name {
        user-select: none;
        margin-left: 10px;
        font-size: 15px;
      }

      .userSweetCircleId {
        user-select: none;
        margin-left: 10px;
        font-size: 12px;
      }

      &:hover {
        background-color: #e2e2e2;
      }
    }
  }

  .search-contacts-online {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #ffffff;
    margin: 10px 0 10px 0;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: #07c160;
      margin-right: 5px;

      span {
        color: #ffffff;
        font-size: 30px;
      }
    }

    &:hover {
      background-color: #f1f1f1;
    }
  }
}

.card-contact {
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .card-contact-info {
    width: 250px;
    height: 150px;

    .button {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.card-contact2 {
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: start;
  justify-content: center;

  .card-contact-info2 {
    width: 350px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .info {
      display: flex;
      align-items: center;

      .userimg {
        margin-right: 10px;
      }

      .nick-name {
        color: #000000;

        .icon-man {
          color: #2cb6fe;
        }

        .icon-woman {
          color: #fb7373;
        }
      }

      .area-name {
        color: #8c8c8c;
        font-size: 13px;
      }
    }

    .button {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.card-contact3 {
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .card-contact-info {
    width: 250px;
    height: 150px;

    .button {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.contact-info {
  margin-top: 60px;
  height: calc(100vh - 60px);
}

.search-result {
  margin-top: 60px;
  height: calc(100vh - 60px);
}

.add-contact-card {
  user-select: none;
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 15px;

  .el-card {
    border: 1px solid #dedede;
    border-radius: 0;
    // 取消阴影
    box-shadow: none;
  }

  .add-contact-card-info {
    width: 300px;
    height: auto;
    //display: flex;
    //flex-direction: column;
    //align-items: start;
    //justify-content: center;
    background: #ebebec;

    :deep(.el-card__body) {
      padding: 0 15px 15px 15px;
    }

    .title {
      font-size: 15px;
      display: flex;
      justify-content: center;
    }

    .applyMsg {
      width: 260px;

      :deep(.el-input__wrapper) {
        //border-radius: 2px;
        box-shadow: none;
      }
    }

    .a {
      color: #bbbbbb;
      font-size: 13px;
      margin: 10px 0 10px 0;
    }

    .sweet-circle-authority {
      .b {
        background: #ffffff;
        padding: 15px;

        .c {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
      }
    }

    .button {
      height: 50px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-button {
        width: 100px;
      }

      .cancel {
        background-color: #dfdfe0;
        border: none;
        color: #07c160;

        &:hover {
          background-color: #c0c0c0;
        }
      }
    }
  }
}

.menu-card {
  position: absolute;
  z-index: 10;

  .card {
    border-radius: 0;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .card-text {
      width: 120px;
      user-select: none;
      font-size: 16px;
      height: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-bottom: 0.5px solid #eaeaea;

      &.delete-contact {
        &:hover {
          background: #ff5151;
        }
      }

      &:hover {
        background: #eaeaea;
      }
    }
  }
}

.el-divider {
  margin: 10px 0 10px 0;
}

.active {
  color: #07c160;
}

:deep(.el-card__body) {
  padding: 0;
}

.el-switch {
  height: 100%;
}

:deep(.el-badge__content) {
  border: none;
}
</style>
